<template>
    <div>
       <h2>watchEffect 功能详解</h2>
       <h2>温度调节器</h2>
       <p>当前温度：{{ temp }}°C</p>
       <p>目标水位：{{ hight }}°C</p>
       <button @click="changeTemp">增加</button>
       <button @click="changeHight">增加</button>
    </div>
</template>

<script lang="ts" setup>
import { ref, watchEffect } from 'vue';
/**
 * watchEffect 详细介绍 (watchEffect Detailed Introduction)
 * 
 * 基本概念：
 * watchEffect 是 Vue 3 中的响应式 API，用于自动跟踪回调函数中的响应式依赖，
 * 并在这些依赖发生变化时重新执行回调函数。
 * 
 * 与 watch 的区别：
 * 1. watchEffect 会立即执行一次回调函数，而 watch 默认不会
 * 2. watchEffect 自动追踪依赖，不需要显式指定要监听的数据
 * 3. watch 可以访问被监听状态的前一个值和当前值，watchEffect 不行
 * 
 * 基本语法：
 * watchEffect(() => {
 *   // 这里访问的任何响应式状态都会被追踪
 *   // 当这些状态变化时，这个回调会重新执行
 * })
 * 
 * 使用场景：
 * 1. 数据联动：当某些响应式数据变化时，需要执行一些副作用操作
 * 2. 异步操作处理：如根据响应式状态发起网络请求
 * 3. DOM 更新：在响应式数据变化后执行 DOM 操作
 * 4. 缓存计算：根据多个响应式数据计算并缓存结果
 * 5. 本地存储同步：将响应式状态自动同步到 localStorage
 * 
 * 停止监听：
 * const stop = watchEffect(() => {})
 * stop() // 调用返回的函数可以停止监听
 * 
 * 清理副作用：
 * watchEffect((onCleanup) => {
 *   // onCleanup 函数用于注册清理回调
 *   onCleanup(() => {
 *     // 这里的代码会在下次执行回调前或停止监听时执行
 *     // 常用于清理定时器、取消请求等
 *   })
 * })
 * 
 * 执行时机控制：
 * watchEffect(() => {}, {
 *   flush: 'pre'    // 默认值，组件更新前执行
 *   // flush: 'post'   // 组件更新后执行，可以访问更新后的 DOM
 *   // flush: 'sync'   // 同步执行，谨慎使用
 * })
 * 
 * 调试：
 * watchEffect(() => {}, {
 *   onTrack: (e) => {}, // 当依赖被追踪时触发
 *   onTrigger: (e) => {} // 当依赖变化触发回调时触发
 * })
 * 
 * 实际应用示例场景：
 * 1. 表单验证：监听表单字段变化，自动执行验证逻辑
 * 2. 搜索功能：监听搜索关键词变化，自动发起搜索请求
 * 3. 数据过滤：监听筛选条件变化，自动过滤数据列表
 * 4. URL 参数同步：监听路由参数变化，自动更新页面状态
 * 5. WebSocket 连接管理：根据用户登录状态自动连接/断开 WebSocket
 * 6. 主题切换：监听主题设置变化，自动应用相应的样式
 * 7. 国际化：监听语言设置变化，自动切换显示语言
 * 8. 权限控制：监听用户角色变化，自动更新可访问的功能
 */

const temp = ref(10);
const hight = ref(10);
 
function changeTemp() {
    temp.value += 10;
}

function changeHight() {
    hight.value += 10;
}

watchEffect(() => {
    if (temp.value >= 60 || hight.value >= 80) {
       console.log('水温/水位过高，停止加热'); 
    } 
})

</script>

<style scoped></style>